<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

const usingRef = useTemplateRef<HTMLElement>('using');
gsap.registerPlugin(ScrollTrigger);

onMounted(() => {
    // 创建立方体展开动画时间线
    const timeline = gsap.timeline({
        scrollTrigger: {
            scroller: usingRef.value!.querySelector('.content'),
            trigger: usingRef.value!.querySelector('.content'),
            start: 'top top',
            end: 'bottom top',
            scrub: true, // 根据滚动位置控制动画速度
        },
    });

    // 展开动画：只用 top/left 移动，不动 transform
    timeline
        .to(usingRef.value!.querySelector('.cube'), {
            rotationX: 45,
            y: 100,
            duration: 2,
            ease: 'power1.inOut',
        })
        .to(usingRef.value!.querySelector('.face.front'), {
            rotationY: 0,
            duration: 1,
            ease: 'power1.inOut',
        })
        .to(usingRef.value!.querySelector('.face.right'), {
            rotationY: 0,
            duration: 2,
            ease: 'power1.inOut',
        })
        .to(
            usingRef.value!.querySelector('.cube'),
            {
                x: -100,
                duration: 2,
                ease: 'power1.inOut',
            },
            '-=1',
        )
        .to(usingRef.value!.querySelector('.face.top'), {
            rotationX: 0,
            duration: 1,
            ease: 'power1.inOut',
        })
        .to(usingRef.value!.querySelector('.face.bottom'), {
            rotationX: 0,
            duration: 1,
            ease: 'power1.inOut',
        })
        .to(usingRef.value!.querySelector('.face.left'), {
            rotationY: 0,
            duration: 1,
            ease: 'power1.inOut',
        });
});
</script>

<template>
    <div class="using" ref="using">
        <div class="cube">
            <div class="face back">后面</div>
            <div class="face right">
                <div class="relative-box">
                    右面
                    <div class="face front">前面</div>
                </div>
            </div>
            <div class="face left">左面</div>
            <div class="face top">上面</div>
            <div class="face bottom">下面</div>
        </div>

        <div class="content">
            <div class="content-section">
                <div>
                    <h1>3D立方体展开动画</h1>
                    <p>继续滚动查看神奇效果</p>
                </div>
            </div>

            <div class="content-section">
                <div>
                    <h2>观察每个面的运动</h2>
                    <p>每个面都会平滑地展开到指定位置</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.using {
    height: 500px;
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: grid;
    place-items: center;

    .cube {
        $size: 180px;
        width: $size;
        height: $size;
        position: relative;
        overflow: visible;
        transform-style: preserve-3d;
        perspective: 1000px;

        .face {
            position: absolute;
            height: 100%;
            width: 100%;
            transform-style: preserve-3d;
            display: grid;
            place-items: center;
            font-size: 24px;
            font-weight: bold;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;

            &.back {
                background-color: rgba(0, 255, 255, 0.16);
            }

            &.top {
                top: -#{$size};
                transform: rotateX(-90deg);
                background-color: rgba(72, 255, 0, 0.16);
                transform-origin: bottom center;
            }

            &.bottom {
                bottom: -#{$size};
                transform: rotateX(90deg);
                background-color: rgba(255, 0, 221, 0.16);
                transform-origin: top center;
            }

            &.left {
                left: -#{$size};
                background-color: rgba(0, 42, 255, 0.16);
                transform-origin: right center;
                transform: rotateY(90deg);
            }

            &.right {
                right: -#{$size};
                background-color: rgba(0, 42, 255, 0.16);
                transform-origin: left center;
                transform: rotateY(-90deg);

                .relative-box {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    display: grid;
                    place-items: center;
                    transform-style: preserve-3d;

                    .front {
                        right: -#{$size};
                        background-color: rgba(0, 255, 255, 0.16);
                        transform-origin: left center;
                        transform: rotateY(-90deg);
                    }
                }
            }
        }
    }

    .content {
        position: absolute;
        inset: 0;
        overflow-y: auto;

        .content-section {
            overflow: hidden;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.52);
            text-align: center;
        }
    }
}
</style>
